do not change templateUrls and styleUrls, add moduleId instead

Author: ardatan

atmosphere-packages/angular-compilers/plugin/register.js

@@ -20,11 +20,11 @@ if(process.env.BLAZE){
 
 let aot = ((process.env.NODE_ENV == 'production') && (process.env.AOT != '0')) || process.env.AOT == '1';
 let rollup = (process.env.ROLLUP == '1');
-
+let compiler, compilerCli;
 try{
   if(aot){
-    require('@angular/compiler');
-    require('@angular/compiler-cli');
+    compiler = require('@angular/compiler');
+    compilerCli = require('@angular/compiler-cli');
   }
 }catch(e){
   console.log('@angular/compiler and @angular/compiler-cli must be installed for AOT compilation!');
@@ -40,7 +40,9 @@ Plugin.registerCompiler({
   filenames: ['tsconfig.json']
 }, () => new AngularTsCompiler({
   aot,
-  rollup
+  rollup,
+  compiler,
+  compilerCli
 }));
 Plugin.registerCompiler({
   extensions: [templateExtension]

atmosphere-packages/angular-typescript-compiler/index.js

@@ -66,12 +66,12 @@ const ngcOptions = {
 };
 
 export class AngularTsCompiler {
-  constructor({aot, rollup}){
+  constructor({aot, rollup, compiler, compilerCli}){
     this.isAot = aot;
     this.isRollup = rollup;
     if(this.isAot){
-      this.compiler = require('@angular/compiler');
-      this.compilerCli = require ('@angular/compiler-cli');
+      this.compiler = compiler;
+      this.compilerCli = compilerCli;
     }
 
   }
@@ -92,7 +92,6 @@ export class AngularTsCompiler {
 
     if (fakeLoaderCode){
       newSource = fakeLoaderCode + '\n' + newSource;
-      console.log(newSource);
     }
 
     return newSource;
@@ -103,15 +102,20 @@ export class AngularTsCompiler {
 
     return code.replace(LOAD_CHILDREN_REGEX,
       (match, url) => {
-        url = url.split('\'').join('').split('"').join('').split(',').join('');
+        const curlyBracesAtTheEnd = url.includes('}');
+        url = url.split('\'').join('').split('"').join('').split(',').join('').split('}').join('');
         const urlArr = url.split('#');
         let modulePath = urlArr[0].trim();
         let moduleName = urlArr[1].trim();
         if(this.isAot){
           modulePath += '.ngfactory';
           moduleName += 'NgFactory';
         }
-        return `loadChildren: () => module.dynamicImport('${modulePath}').then(allModule => allModule['${moduleName}']),`;
+        let finalReplacement = `loadChildren: () => module.dynamicImport('${modulePath}').then(allModule => allModule['${moduleName}']),`;
+        if(curlyBracesAtTheEnd){
+          finalReplacement += '}'
+        }
+        return finalReplacement;
       });
 
   }
@@ -121,13 +125,8 @@ export class AngularTsCompiler {
         (match, quote, url) => `'${(firstSlash ? '/' : '~/../') + path.join(basePath, url)}'`)
       .replace(/\\/g, '/');
   }
-  fixResourceUrls(source, basePath) {
-    const newSource = source
-      .replace(TEMPLATE_URL_REGEX,
-        (match, url) => `templateUrl:${this.replaceStringsWithFullUrls(basePath, url, false)}`)
-      .replace(STYLES_URLS_REGEX,
-        (match, urls) => `styleUrls:${this.replaceStringsWithFullUrls(basePath, urls, false)}`);
-    return newSource;
+  addModuleIdForComponent(code){
+    return code.replace('Component({', 'Component({ moduleId: module.id,');
   }
   processFilesForTarget(inputFiles) {
     const filesMap = new Map();
@@ -253,7 +252,7 @@ export class AngularTsCompiler {
         }
         const basePath = inputFile.getPathInPackage().replace(inputFile.getBasename(), '');
         if (!this.isAot) {
-          code = this.fixResourceUrls(code, basePath)
+          code = this.addModuleIdForComponent(code, basePath)
         }
         code = code.split('require("node_modules/').join('require("');
         if(this.isRollup){

examples/MeteorCLI/all-in-one/.meteor/versions

@@ -1,8 +1,8 @@
 [email protected]
-angular-compilers@0.2.9_3
-angular-html-compiler@0.2.9
-angular-scss-compiler@0.2.9_1
-angular-typescript-compiler@0.2.9_6
+angular-compilers@0.3.1_2
+angular-html-compiler@0.3.1_2
+angular-scss-compiler@0.3.1_2
+angular-typescript-compiler@0.3.1_2
 [email protected]
 [email protected]
 [email protected]
@@ -32,8 +32,6 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -54,9 +52,6 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
-tmeasday:[email protected]
 [email protected]
 [email protected]
 [email protected]

examples/MeteorCLI/all-in-one/imports/app/app.component.ts

@@ -1,35 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
-import { Title } from '@angular/platform-browser';
-
-import { Subscription } from 'rxjs/Subscription';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app',
   templateUrl: 'app.html'
 })
-export class AppComponent implements OnInit, OnDestroy {
-  //Dynamic title change along with router
-  private titleChangeSubscription: Subscription;
-  constructor(
-    private router: Router,
-    private activatedRoute: ActivatedRoute,
-    private titleService: Title
-  ) { }
-  ngOnInit() {
-    this.titleChangeSubscription =
-      this.router.events
-        .filter((event) => event instanceof NavigationEnd)
-        .map(() => this.activatedRoute)
-        .map((route) => {
-          while (route.firstChild) route = route.firstChild;
-          return route;
-        })
-        .filter((route) => route.outlet === 'primary')
-        .mergeMap((route) => route.data)
-        .subscribe((event) => this.titleService.setTitle(event['title']));
-  }
-  ngOnDestroy() {
-    this.titleChangeSubscription.unsubscribe();
-  }
-}
+export class AppComponent {}

examples/MeteorCLI/all-in-one/imports/app/app.module.ts

@@ -20,17 +20,11 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
     RouterModule.forRoot([
       {
         path: 'todoList',
-        component: TodoListComponent,
-        data: {
-          title: 'Todo List'
-        }
+        component: TodoListComponent
       },
       {
         path: 'todoAdd',
-        loadChildren: './todo-add/todo-add.module#TodoAddModule',
-        data: {
-          title: 'Add Todo'
-        }
+        loadChildren: './todo-add/todo-add.module#TodoAddModule'
       },
       // Home Page
       {
@@ -41,10 +35,7 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
       // 404 Page
       {
         path: '**',
-        component: PageNotFoundComponent,
-        data: {
-          title: '404 Page Not Found'
-        }
+        component: PageNotFoundComponent
       }
     ])
   ],

examples/MeteorCLI/all-in-one/imports/app/todo-list/todo-list.component.ts

@@ -20,12 +20,14 @@ export class TodoListComponent implements OnInit, OnDestroy {
     this.todos = Todos.find();
     // Subscribe and connect it to Angular's change detection system
     // while running on client
-    if (Meteor.isClient)
+    if (Meteor.isClient){
       this.todoListSubscription = MeteorObservable.subscribe('todoList').subscribe();
+    }
   }
   ngOnDestroy() {
-    if (this.todoListSubscription)
+    if (this.todoListSubscription){
       this.todoListSubscription.unsubscribe();
+    }
   }
   removeTodo(_id: string) {
     Meteor.call('removeTodo', _id);

examples/MeteorCLI/all-in-one/package-lock.json

@@ -17,11 +17,11 @@
     "@angular/platform-server": "^5.2.9",
     "@angular/router": "^5.2.9",
     "@babel/runtime": "^7.0.0-beta.42",
-    "core-js": "^2.5.3",
+    "core-js": "^2.5.4",
     "meteor-node-stubs": "~0.3.3",
     "meteor-rxjs": "^0.4.10",
-    "rxjs": "^5.5.7",
-    "zone.js": "^0.8.20"
+    "rxjs": "^5.5.8",
+    "zone.js": "^0.8.21"
   },
   "devDependencies": {
     "@angular/compiler-cli": "^5.2.9",
@@ -31,7 +31,7 @@
     "@types/sinon": "^4.1.0",
     "chai": "^4.1.2",
     "phantomjs-prebuilt": "^2.1.16",
-    "sinon": "^4.1.3",
-    "typescript": "^2.7.2"
+    "sinon": "^4.5.0",
+    "typescript": "^2.8.1"
   }
 }