feat: angular 5 #328

PanayotCankov · 2017-11-27T15:10:27Z

This PR addresses several issues and introduces some new features.

Angular5 support
Adds support for CSS files to be added through the css-loader for vanilla apps and the app.css (the nativescript-css-loader is now obsolete)
Adds the app.css in the snapshot for Android, it is registered in the vendor.js so the snapshot generator can load, and parse the NativeScript theme
Adds the PlatformFSPlugin to map files:
- Filter alien files (e. g. when building for Android will filter .ios. files)
- Rename platform specific files (e. g. when building for android *.android. will be renamed to *.)
- Handles watching for platform specific files (e. g. for Android when watching for component.ts will also watch for component.android.ts)
Should bump the version to 0.9.0
Adds demo apps that feature most of the supported features in webpack and have automation tests on top
Adds the WatchStateLoggerPlugin to do IPC with the CLI and notify for watch state changes
Options! Webpack options are passed through the CLI with tns run ios|android --bundle --env.*
- --env.snapshot enables snapshot for android
- --env.uglify enables uglification and minification
- --env.report creates the report folder with chunk stats
- --env.aot for angular, enables the Angular ahead-of-time compilation

For Angular5

Implements a NativeScriptAngularCompilerPlugin that uses the new AngularCompilerPlugin from @angular/webpack
The new AngularCompilerPlugin creates a TypeScript CompilerHost under the hood and uses it for webpack compiler.inputFileSystem and compiler.watchFileSystem, it also compiles CSS and HTML resources. The NativeScriptAngularCompilerPlugin extends the AngularCompilerPlugin to handle platform specific resource resolution and resolving compiler modules in the CompilerHost. Then the PlatformFSPlugin's effect is applied on top of the AngularCompilerPlugin's FS so webpack can work with the platform specific files seemlesly.
webpack --watch watch is able to recompile in under 2 sec, but is not yet integrated in the CLI

For JavaScript and TypeScript apps

Adds the PlatformFSPlugin
Enumerates the page.* files in the app folder and registers them in the NativeScript framework using dynamic webpack require contexts, it is then registered in the global.registerWebpackModule so the modules can load .js, .css, .sass, .xml, etc. files, dens no longer need to list these files manually

Breaking Changes

I am sorry guys, but the way this PR works makes a lot of sense (snapshotting the theme because we can, using the css-loader because we can, etc.) but that also introduces some annoying breaking changes:

The theme should now be required using leading tilde without slash:
@import '~nativescript-theme-core/css/core.light.css';.
that's how the css-loader loads css files from the node_modules.
The routes loadChildren best be absolute paths, System.import we use now has no support for referrer so the paths provided to loadChildren better be non-relative, so:
loadChildren: "./details/ninja.module#NinjaModule" in the ninjas folder becomes:
loadChildren: "~/ninjas/details/ninja.module#NinjaModule".
in case you still want to use tns run ios|android without web pack.
The tsconfig.json, for the love of tilde, better get paths like:

        "paths": {
            "~/*": [
                "app/*"
            ],
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }

When bundled with webpack, webpack uses numbers for module.id and Angular throws number is not a string kind of errors. Replace all occurrences of moduleId: module.id with moduleId: __filename. This works well in {N} context, __filename is almost the same as module.id with the little difference that it has the .js extension, while webpack replaces occurrences of __filename with paths relative to the app folder.

Instead of relying on npm scripts, rely on hooks so that certain parts of the prepare chain can be overriden. Do not skip moving `App_Resources` directory, as CLI expects it to be present in platforms and will take care of the resources inside. chore(deps): unpin nativescript-hook version enable webpack builds in debug and optional snapshot feat: support for Angular 5 - add NativeScriptAngularCompilerPlugin that extends AngularCompilerPlugin BREAKING CHANGES NativeScriptAngularCompilerPlugin must be used instead of AotPlugin in your webpack configuration from now on. You can regenerate the webpack configuration if you haven't made changes to it by running "./node_modules/.bin/update-ns-webpack --configs". ... Implement NativeScriptAngularCompilerPlugin and integrate the PlatformFSPlugin .js .map.js and .d.ts files don't have to stay in source control, they will be generated on prepare Make prepare script to tsc, and ignore .ts artifacts from source control Remove the prepare scripts that create templates/webpack.*.js Make the webpack config work for angular, typescript and javascript WIP chore: update added versions Add Angular and JavaScript apps for tests Add demo/AngularApp, demo/JavaScriptApp in wip chore: remove dependency to @angular/animations as it's not used feat(demo-ng): add lazy loaded modules Add scss and platform specific files to the JavaScriptApp demo Make JavaScriptApp work with css and scss, bundle all .js, .css and .scss files test(AngularApp): add configs, dependencies and samples Add some testable rectangles for the app so we can ensure CSS and SCSS work Fix a minor bug in the angular webpack plugin Added a TypeScript project and configured the TypeScript webpack config test(AngularApp): add tests and images Map the watchFileSystem, seems to work 'decently' now... Map timestamps so platform specific files dont get rebuild with every change Add IPC notifications for CLI watch Adding IPC channel without watch made the proccess hang filter for watcher was mapping absolute paths to basenames

Fix `cwd` parameter name. Remove `shell: true` becuase it causes issues on windows.

PanayotCankov · 2017-11-30T11:57:15Z

bin/ns-bundle

@@ -225,7 +225,7 @@ function spawnChildProcess(command, ...args) {

        const childProcess = spawn(command, escapedArgs, {


Should spawn tns run ios|android --bunlde ... and obsolete the implementation.

PanayotCankov · 2017-11-30T12:01:56Z

lib/after-watch.js

@@ -0,0 +1,8 @@
+var compiler = require('./compiler');
+module.exports = function($logger) {
+    var webpackProcess = compiler.getWebpackProcess();


const instead of vars

PanayotCankov · 2017-11-30T12:02:59Z

lib/before-prepareJS.js

@@ -71,8 +7,9 @@ module.exports = function ($mobileHelper, $projectData, hookArgs) {
 	const config = {
 		env,
 		platform,
-		bundle: appFilesUpdaterOptions.bundle
+		bundle: appFilesUpdaterOptions.bundle,
+		watch: false


We are preparing the nativescript-dev-webpack for watch but it is not there yet.

PanayotCankov · 2017-11-30T12:07:35Z

lib/compiler.js

+            }
+
+            // TODO: Read from CLI options...
+            const { watch } = true;


Delete, move the comment.

PanayotCankov · 2017-11-30T12:16:28Z

lib/compiler.js

+            });
+
+            function resolveOnWebpackCompilationComplete(message) {
+                if (message === "Webpack compilation complete. Watching for file changes.") {


Extract constants

PanayotCankov · 2017-11-30T12:19:59Z

lib/compiler.js

+
+            if (config.watch) {
+                childProcess.on("message", resolveOnWebpackCompilationComplete);
+                if (webpackProcess) {


@Mitko-Kerezov
Probably we will not throw here, but we will figure it out when it is integrated in the CLI,

PanayotCankov · 2017-11-30T12:32:53Z

plugins/NativeScriptAngularCompilerPlugin.ts

+
+export const AngularCompilerPlugin: typeof ngToolsWebpack.AngularCompilerPlugin = appNgToolsWebpack.AngularCompilerPlugin;
+
+export type NativeScriptAngularCompilerPluginOptions = ngToolsWebpack.AngularCompilerPluginOptions & { platformOptions?: PlatformFSPluginOptions };


the fuck did I wrote?

export interface NativeScriptAngularCompilerPluginOptions extends ngToolsWebpack.AngularCompilerPluginOptions { platformOptions?: PlatformFSPluginOptions; }

PanayotCankov · 2017-11-30T12:42:00Z

plugins/NativeScriptAngularCompilerPlugin.ts

+                }
+            };
+            this.__compilerHost.resourceNameToFileName = function(file, relativeTo) {
+                const parsed= path.parse(file);


PanayotCankov · 2017-11-30T12:46:43Z

plugins/NativeScriptAngularCompilerPlugin.ts

+    getCompiledFile(this: NativeScriptAngularCompilerPlugin, file: string): CompiledFile {
+        try {
+            if (this.platform) {
+                const parsed= path.parse(file);


PanayotCankov · 2017-11-30T12:51:46Z

plugins/PlatformFSPlugin.ts

+
+    public apply(compiler) {
+        this.context = compiler.context;
+        compiler.inputFileSystem = mapFileSystem({


TODO: We will need to augment the watch file system.

PanayotCankov · 2017-11-30T12:55:35Z

plugins/PlatformFSPlugin.ts

+    const alienPlatforms = platforms.filter(p => p !== platform);
+    const alienPlatformFilters = alienPlatforms.map(platform => ({
+            endsWithSuffix: `.${platform}`,
+            contains: `.${platform}.`


This may fire false positives on:
component.android.ts // ok
component.android.myapp.ts // not-ok

PanayotCankov · 2017-11-30T12:59:08Z

plugins/PlatformFSPlugin.ts

+
+    const trimPlatformSuffix = file => {
+        const {dir, name, ext} = parseFile(file);
+        if (ext === currentPlatformExt) {


PanayotCankov · 2017-11-30T13:08:43Z

plugins/PlatformFSPlugin.ts

+
+    function platformSpecificFile(file: string): string {
+        const {dir, name, ext} = parseFile(file);
+        const platformFilePath = join(dir, name + ("." + platform) + ext);


template string...

PanayotCankov · 2017-11-30T14:04:01Z

templates/webpack.angular.js

+                // SASS support
+                { test: /\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
+                // Compile TypeScript files with ahead-of-time compiler.
+                { test: /.ts$/, loader: "@ngtools/webpack" },


I have no idea if this should be used at all.
My guess is when component.ts module is resolved by webpack, it will get this loader to call getCompilerFile on the AngularCompilerPlugin.

vchimev · 2017-12-01T13:56:51Z

typescript-android

vchimev · 2017-12-01T14:17:24Z

typescript-ios

…webpack, figured out routes

… the .ios.ts and .android.ts suffixes

sis0k0 · 2017-12-05T17:44:18Z

Heya! Just a few question about the PR :).

The routes loadChildren best be absolute paths, System.import we use now has no support for referrer so the paths provided to loadChildren better be non-relative, so:
loadChildren: "./details/ninja.module#NinjaModule" in the ninjas folder becomes:
loadChildren: "~/ninjas/details/ninja.module#NinjaModule".
in case you still want to use tns run ios|android without web pack.
The tsconfig.json, for the love of tilde, better get paths like:
        "paths": {
            "~/*": [
                "app/*"
            ],
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }

Does that mean we can use "app/.../something" for specifying absolute routes or there is a particular reason for mapping 'tilde' (~) to 'app'?

When bundled with webpack, webpack uses numbers for module.id and Angular throws number is not a string kind of errors. Replace all occurrences of moduleId: module.id with moduleId: __filename. This works well in {N} context, __filename is almost the same as module.id with the little difference that it has the .js extension, while webpack replaces occurrences of __filename with paths relative to the app folder.

Do we still need the moduleId when building without webpack now, when we're reusing the SystemJsModuleLoader? If we don't, do you think it's a good idea to have a plugin that adds the moduleId: __filename node dynamically to components as part of the webpack build process?

…env.aot, fix tsconfig.aot.json paths

PanayotCankov · 2017-12-06T09:57:50Z

I am not sure actually, we currently have to support three configurations:

tns run android
tns run android --bundle
tns run android --bundle --env.out
And the above is the only setup that work in all of them. I thing moduleId is obsolete but there was a reason it is still necessary. This article is helpful: https://angular.io/guide/change-log (All mention of moduleId removed. "Component relative paths" guide deleted)

I will double check what's the state with the paths in all of them.

PanayotCankov force-pushed the angular5 branch from c680717 to b124e3b Compare November 29, 2017 11:39

vchimev and others added 2 commits November 29, 2017 16:24

chore(AngularApp): update config files

3507346

Minor fix

5a42e32

Fix `cwd` parameter name. Remove `shell: true` becuase it causes issues on windows.

PanayotCankov commented Nov 30, 2017

View reviewed changes

lib/compiler.js Outdated

}

// TODO: Read from CLI options...

const { watch } = true;

Copy link

Contributor Author

PanayotCankov Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete, move the comment.

PanayotCankov commented Nov 30, 2017

View reviewed changes

test(TypeScriptApp): update demo and add tests

c99e228

vchimev force-pushed the angular5 branch from eeb84a9 to c99e228 Compare November 30, 2017 13:39

PanayotCankov requested review from Mitko-Kerezov, sis0k0, EddyVerbruggen and vakrilov November 30, 2017 14:00

PanayotCankov commented Nov 30, 2017

View reviewed changes

PR review, changes

7f2b264

vchimev force-pushed the angular5 branch from cd4f4e7 to 6d0d06d Compare December 1, 2017 08:59

text(TypeScriptApp): update resources and tests

6f61890

vchimev force-pushed the angular5 branch from 6d0d06d to 6f61890 Compare December 4, 2017 09:05

PanayotCankov and others added 3 commits December 4, 2017 15:59

Make scss work with the nativescript-dev-sass hooks when run without …

df96cd0

…webpack, figured out routes

test(TypeScriptApp): update ios style image

5d20772

Add a simple attribute directive to test that angular works well with…

f6ad70b

… the .ios.ts and .android.ts suffixes

vchimev changed the title ~~Angular5~~ feat: angular 5 Dec 5, 2017

PanayotCankov and others added 3 commits December 6, 2017 10:31

Roll back the platform specific Directive as it does not work with --…

a6c681f

…env.aot, fix tsconfig.aot.json paths

We still need to copy App_Resources/** for the prepareNative to work

ae5915f

test(AngularApp): update demo and tests

a58b3bc

vchimev approved these changes Dec 6, 2017

View reviewed changes

PanayotCankov merged commit 5539ddb into master Dec 6, 2017

PanayotCankov deleted the angular5 branch December 6, 2017 11:12

NickIliev mentioned this pull request Dec 6, 2017

refactor: Update article for WebPack bundling via CLI with --bundle flag NativeScript/docs-v7#993

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: angular 5 #328

feat: angular 5 #328

PanayotCankov commented Nov 27, 2017 •

edited

Loading

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017

PanayotCankov Nov 30, 2017 •

edited

Loading

vchimev commented Dec 1, 2017

vchimev commented Dec 1, 2017

sis0k0 commented Dec 5, 2017

PanayotCankov commented Dec 6, 2017

		@@ -225,7 +225,7 @@ function spawnChildProcess(command, ...args) {

		const childProcess = spawn(command, escapedArgs, {


		export const AngularCompilerPlugin: typeof ngToolsWebpack.AngularCompilerPlugin = appNgToolsWebpack.AngularCompilerPlugin;

		export type NativeScriptAngularCompilerPluginOptions = ngToolsWebpack.AngularCompilerPluginOptions & { platformOptions?: PlatformFSPluginOptions };

feat: angular 5 #328

feat: angular 5 #328

Conversation

PanayotCankov commented Nov 27, 2017 • edited Loading

For Angular5

For JavaScript and TypeScript apps

Breaking Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PanayotCankov Nov 30, 2017 • edited Loading

Choose a reason for hiding this comment

vchimev commented Dec 1, 2017

vchimev commented Dec 1, 2017

sis0k0 commented Dec 5, 2017

PanayotCankov commented Dec 6, 2017

PanayotCankov commented Nov 27, 2017 •

edited

Loading

PanayotCankov Nov 30, 2017 •

edited

Loading