I have an existing Razor/MVC application that uses AngularJS 1.6.9 as well. To share components with partner teams, we had to create a makeshift Angular 5 app in order to use some shared components via NPM. In our Angular 5 app, we would import the shared components and then downgrade them so we could use them in our 1.6.9 app and this worked flawlessly. We followed the steps outlined here. One thing to note is that the NgSixModule1 defines the components we are using within it's entry components which is why it's not explicitly defined in the app.module.ts (this worked for Angular 5)
However, our partner teams recently made the upgrade Angular 6 and we are trying to do the same. But after performing all the necessary upgrade commands, the UI doesn't render those shared elements. Our ng build --prod works but when we try to render the page, the page will load minus those shared components.
As I said above, this worked perfectly in Angular 5, once I upgrade to Angular 6 it stopped worked. Any insight would be greatly appreciated :)
FYI there were no errors in the console window and the mark up rendered but with nothing showing up.
app.module.ts
@NgModule({
imports: [
BrowserModule,
UpgradeModule,
HttpClientModule,
NgSixModule1
],
declarations: [],
entryComponents: [],
providers: []
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.getElementById("my-app-container"), ["MyApp"]);
}
}
declare var angular: any;
angular
.module("module-name", [])
.directive(
"componentOne",
downgradeComponent({ component: ComponentOneComponent }) as angular.IDirectiveFactory
)
.directive(
"componentTwo",
downgradeComponent({ component: ComponentTwoComponent }) as angular.IDirectiveFactory
)
page.cshtml
<script type="text/javascript">
var app = angular.module("MyApp", ['module-name', 'ngRoute']);
app.controller("controllerName", function ($scope, $rootScope, $sce, $http, xpost) {
// Controller information
});
</script>
<div ng-controller="controllerName" id="my-app-container">
<shared-component-one></shared-component-one>
<shared-component-two>
<REST OF THE HTML>
</shared-component-two>
</div>
package.json
{
"name": "module-name",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "6.1.10",
"@angular/common": "6.1.10",
"@angular/compiler": "6.1.10",
"@angular/core": "6.1.10",
"@angular/forms": "6.1.10",
"@angular/http": "6.1.10",
"@angular/platform-browser": "6.1.10",
"@angular/platform-browser-dynamic": "6.1.10",
"@angular/router": "6.1.10",
"@angular/upgrade": "6.1.10",
"@shared/component": "^6.5.5",
"angular": "1.6.9",
"core-js": "^2.4.1",
"moment": "^2.22.2",
"rxjs": "^6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0",
"@angular/cli": "^6.2.5",
"@angular/compiler-cli": "6.1.10",
"@angular/language-service": "6.1.10",
"@types/angular": "^1.6.43",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.9.2"
}
}
