-
-
Notifications
You must be signed in to change notification settings - Fork 40
feat: angular 5 #328
feat: angular 5 #328
Conversation
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
c680717
to
b124e3b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should spawn tns run ios|android --bunlde ...
and obsolete the implementation.
lib/after-watch.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const instead of vars
lib/before-prepareJS.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are preparing the nativescript-dev-webpack for watch but it is not there yet.
lib/compiler.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Delete, move the comment.
lib/compiler.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Extract constants
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Mitko-Kerezov
Probably we will not throw here, but we will figure it out when it is integrated in the CLI,
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the fuck did I wrote?
export interface NativeScriptAngularCompilerPluginOptions extends ngToolsWebpack.AngularCompilerPluginOptions {
platformOptions?: PlatformFSPluginOptions;
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
space
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
space
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TODO: We will need to augment the watch file system.
plugins/PlatformFSPlugin.ts
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This may fire false positives on:
component.android.ts // ok
component.android.myapp.ts // not-ok
plugins/PlatformFSPlugin.ts
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just don't
plugins/PlatformFSPlugin.ts
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
template string...
eeb84a9
to
c99e228
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
cd4f4e7
to
6d0d06d
Compare
typescript-android
typescript-ios
6d0d06d
to
6f61890
Compare
...webpack, figured out routes
... the .ios.ts and .android.ts suffixes
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?
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.
Uh oh!
There was an error while loading. Please reload this page.
This PR addresses several issues and introduces some new features.
vendor.js
so the snapshot generator can load, and parse the NativeScript themetns run ios|android --bundle --env.*
--env.snapshot
enables snapshot for android--env.uglify
enables uglification and minification--env.report
creates thereport
folder with chunk stats--env.aot
for angular, enables the Angular ahead-of-time compilationFor Angular5
@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 CLIFor JavaScript and TypeScript apps
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 manuallyBreaking 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:
@import '~nativescript-theme-core/css/core.light.css';
.that's how the css-loader loads css files from the node_modules.
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 theninjas
folder becomes:loadChildren: "~/ninjas/details/ninja.module#NinjaModule"
.in case you still want to use
tns run ios|android
without web pack.paths
like:module.id
and Angular throwsnumber is not a string
kind of errors. Replace all occurrences ofmoduleId: module.id
withmoduleId: __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.