single-spa / single-spa-angular Goto Github PK

View Code? Open in Web Editor NEW

198.0 198.0 78.0 5.19 MB

Helpers for building single-spa applications which use Angular

License: Apache License 2.0

TypeScript 76.83% JavaScript 13.39% HTML 3.94% SCSS 0.58% Shell 0.10% EJS 5.16%

front-end

single-spa-angular's Introduction

single-spa

Join the chat on Slack

Donate to this project

Official single-spa hosting

A javascript framework for front-end microservices

Build micro frontends that coexist and can (but don't need to) be written with their own framework. This allows you to:

Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you're using)
Write new code, possibly with a new framework, without rewriting your existing app
Lazy load code for improved initial load time.

Documentation

You can find the single-spa documentation on the website.

Check out the Getting Started page for a quick overview.

Demo and examples

Please see the examples page on the website.

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing on the single-spa website.

Contributing

The main purpose of this repository is to continue to evolve single-spa, making it better and easier to use. Development of single-spa, and the single-spa ecosystem happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving single-spa.

Code of Conduct

Single-spa has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to single-spa.

single-spa-angular's People

Stargazers

Watchers

Forkers

me-12 tunks pauljmelia nickfeng1982 stephenransom kbjerke magefo gowthamselvaraj ernestlv cesardraw2 den-dp ricardofct santicalvo lykathia link3337 pedromedley svenseemann nadimqwery eryczou chenfengami rdr4g0n heb-mobile vaibhavarora14 hangxun kevincathcart qdu123 adisreyaj jones-starz raphaelcavalcante jogelin thiagolangoni saifdev2191 binhtran04 orosro doxingg basavarajk hechanghong nvladimirovi narikenabilli alonpepperi nicknasirpour highestop ajaykrishnan33 outcomes-timothy-huddle cj99 sharoonilyas malikasadawan essquare web-widget tool-s chrisnarto jonatanmartinbabel angelotas dupersope naveen-joshi cjosue15 oriolinvernonllaneza vidyashrer11 dorothyewuah sushilb21 dineshondev zhiming2076 wfpaisa manbearwiz harsh8mel ddtmm nntdias kongshu612 subarnajoshi zerodi kolynchick victorlevasseur stevesankar tnavinter19 enlob leogouveia iamajmalhassan

single-spa-angular's Issues

Route jump failed in a single sub-application

If the application is in this configuration, I jumped to testPage without responding.

If I add '/app2' to useValue, I can jump to testPage. But you can't jump to other sub-applications.

Router not working without APP_BASE_HREF

Hi, @joeldenning

Based on your comment in #62 I made a few changes to my fork: remove-app-base-href, you can compare it to the master branch, only difference is removal of APP_BASE_HREF providers in app1 and app2.

Without APP_BASE_HREF an empty path, indicating the root of this specific application will simply redirect to the root of the single-spa app. So a router configuration like:

const routes: Routes = [
  { path: '', pathMatch: 'full', component: EmptyRouteComponent },
  { path: 'subroute', component: SubrouteComponent },
  { path: '**', redirectTo: '' },
];

will not work.

I also removed BrowserAnimationsModule from app1 and AnimationEngine from the singleSpaAngular options in app1/src/main.single-spa.ts, because it was causing issues with lazy loading, possibly related to: angular/angular#20719, but I haven't found it reference in a ticket.

EDIT:
This answer mentions it https://stackoverflow.com/a/45660781

Allow user to configure where their single-spa root config is during ng serve

In order for single-spa-angular's dev server to be useful, we need it to load up the single-spa root config as the webpack-dev-server's index or via the webppack-dev-serveopenPage configuration options. index would be for a static index.html file (probably most common for single-spa users), or openPage would be if the index.html is hosted by a local server.

I think the ideal solution would be one where we add a question during the ng add single-spa-angular process that let's the user choose between the two options. This would add some options to the single-spa-angular:dev-server schematic that could be modified via the angular.json file.

Support for angular 7

This issue will capture things in progress for getting angular 7 working. Here's the POC / early work on things: https://github.com/joeldenning/angular7-experimentation

AOT build and Ivy compiler

I have tried to implement angular ivy compiler with the latest version on single-spa angular but not able to compile the project. is it support ivy compiler (@angular/cli v8.0.0-beta.7)?

Dependency injection with Angular 7 not working

Hello,

I have a problem with dependency injection in any component, using angular 7. For instance let's have a look at injecting Router.

angular.app.ts:

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import singleSpaAngular from "single-spa-angular";
import mainModule from "./main.module";
import { Router } from "@angular/router";

const ngLifecycles = singleSpaAngular({
  domElementGetter,
  mainModule,
  angularPlatform: platformBrowserDynamic(),
  template: `<ng-form-app />`,
  Router
});

export const bootstrap = [ngLifecycles.bootstrap];

export const mount = [ngLifecycles.mount];

export const unmount = [ngLifecycles.unmount];

function domElementGetter() {
  return document.getElementById("angular-app");
}

main.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { enableProdMode } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { RouterModule, Routes } from "@angular/router";
import { NGFormApp } from "./app.component";
import { CreateBookComponent } from "./components/create-book.component";
import { APP_BASE_HREF } from "@angular/common";
import { EditBookComponent } from "./components/edit-book.component";

const routes: Routes = [
  {
    path: "",
    component: CreateBookComponent
  },
  { path: "books/:id/edit", component: EditBookComponent }
];

try {
  enableProdMode();
} catch (err) {
  console.info("EnableProdMode already set");
}

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes), ReactiveFormsModule],
  declarations: [NGFormApp, CreateBookComponent, EditBookComponent],
  bootstrap: [NGFormApp],
  providers: [{ provide: APP_BASE_HREF, useValue: "/" }]
})
export default class MainModule {}

edit-book.component.ts:

import { Component, Inject, OnInit } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";
import template from "./edit-book.component.html";
import { BooksService } from "../../shared/services/books.service";
import { Router } from "@angular/router";

@Component({
  selector: "ng-create-book",
  template
})
export class EditBookComponent implements OnInit {
  formData: FormGroup;
  constructor(private router: Router) {}

  ngOnInit() {
    this.formData = new FormGroup({
      author: new FormControl(""),
      title: new FormControl("")
    });
  }

  onClickSubmit(data: any) {
    // BooksService.createBook(data).then(resp => {
    //   this.formData.reset();
    // });
  }
}

Each time when I do any kind of dependency injection I get the following error: Uncaught Error: Application 'angular' died in status NOT_MOUNTED: Can't resolve all parameters for EditBookComponent: (?). at syntaxError (compiler.js:2547) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:17874) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:17767) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:17386) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:17970) at compiler.js:17961 at Array.forEach (<anonymous>) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentsFromProvider (compiler.js:17960) at compiler.js:17933 at Array.forEach (<anonymous>).

Am I doing something wrong?

It would be very much appreciated if anyone could have a look over my problem!

Thanks!

README assumes know about http-server

The instructions include running an http-server instance:

npx http-server . -o

Which shouldnt be possible unless you npm i http-server

How to handle router links between different single-spa application subrouters

In the coexisting-angular-microfrontends, the navbar works will to switch different apps.
In app1 I have two subrouters "/app1/subRouter1" and "app1/subRouter2"
In app2 there are also have two subrouters "/app2/subRouter1" and "app2/subRouter2".
Now If there is a link on "/app1/subRouter1" page go to app2 subrouter2. That will not work,

How to fix this?

Uncaught TypeError: Cannot read property 'injector' of undefined at single-spa-angular.js:90

First of all, wanted to thank to the author for creating single-spa libraries. Have been trying it out from the last couple days, but now hitting this glitch without much progress. Getting this issue when attempt to load the basic Angular app with root application.

Reproduce Steps

Generated an Angular App with Angular CLI version 7.3.8.
Run ng add single-spa-angular@beta (3.0.0-beta.17) verified the corresponding changes and added both libraryName and libraryTarget

...
"architect": {
        "build": {
          "builder": "single-spa-angular:build",
          "options": {
                             "libraryName": "appAngular1",
                             "libraryTarget": "umd",
                             ...
                             }
           ...
           }
       ...
}
...

Setup an static server serving main.js from this Angular App
Using another root application to loads this Angular app with single-spa (i.e. singleSpa.registerApplication('appAngular1', () => ...) with global[appAngular1].default;

Debugging

The attempt to debug found that opts.bootstrappedModule is undefined at line 90 in unmount. While the initialization code opts.bootstrappedModule = module; at line 80 in mount never got invoked, perhaps the reason why it was undefined. But not sure why the mount call didn't complete?

Any guidance about how to move beyond this issue is highly appreciated.

Remove Babel dependencies

Switch over to using TypeScript for the entire lib

No NgModule metadata found for 'AppModule'

As always, thanks for the great framework and for putting together these starter kits.

I'm running into an error when attempting to use two Angular 2 based child apps that were implemented using the single-spa-angular2 starter kit.
When I navigate from angularApp1 -> angularApp2 -> angularApp1
both apps mount and render successfully the first time, but when navigating back to angularApp1 I get the following error in the console. angularApp2 continues to mount and render fine.

Uncaught Error: 'angularApp1' died in status NOT_MOUNTED: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver../node_modules/@angular/compiler/@angular/compiler.es5.js.NgModuleResolver.resolve (portal.bundle.js:19073)
    at CompileMetadataResolver../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (portal.bundle.js:19720)
    at JitCompiler../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._loadModules (portal.bundle.js:31164)
    at JitCompiler../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (portal.bundle.js:31137)
    at JitCompiler../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (portal.bundle.js:31066)
    at PlatformRef_../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (portal.bundle.js:36752)
    at PlatformRef_../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule (portal.bundle.js:36738)
    at Array../src/portal.app.ts.mount (portal.bundle.js:64427)
    at i (vendor.bundle.js:29977)
    at vendor.bundle.js:2997

I can put together a sample project to demonstrate it but was wondering if you've seen this error before and have any ideas what's causing it? I'm more of a React dev so my knowledge of Angular isn't the best. Any help is appreciated!

Interop with SystemJS@3

Currently (as of [email protected]), the documentation leads people down a path that doesn't work with SystemJS@3. We should either change the documentation or resolve any problems that prevent interop with SystemJS@3.

angular2 router not deactivated

Hi,
first of all great work!
I'm trying to use your example to see if this tool fit with my requirement and in the angular2 application I tried to add a simple router example. the angular 2 works great but when I try to switch to react (after angular2 has been loaded) it fail because angular2 is not unmounted and it try to find the path app1.

this is the repository that I created: https://github.com/daniele-zurico/microservice-test

schematic: root

Generate a root application to host single-spa apps.

Support and documentation for multiple angular apps coexisting in one page

See related single-spa/single-spa#214 and overall angular 7 issue #14

Assets in angular.json are not being loaded

IE11 support, arrow functions & backticks

Hi, this project is incompatible with IE11, and if I build it using target es5, the builders do not work. Any dependency between the two or could it be separated into different projects? I understand that this probably isn't part of your requirement.

not able to run application using v3.0.0-beta.19

Hi, @joeldenning
I have implemented single-spa angular 7 solution and it was working till v3.0.0-beta.17 release. I show the updated version today and try to implement the lazy loading with the latest version but did not get any luck.
I have cloned the coexisting-angular-microfrontends solution on my local and follow the step under the local development section(https://github.com/joeldenning/coexisting-angular-microfrontends).

It is giving file not fond exception.

Am I missing anything?

schematic: ng serve

Create a schematic that allows the user to run their single-spa CLI app in serve mode to support watching 🚀

FormGroup submit event refresh the page (navigate within app)

I have implemented the lazy loading with latest version( v3.0.0-beta.20) and after that FormGroup submit event refresh the page if you navigate within the app.

i.e formgroup is use on homecomponent in APP1
Then-
routes
1 Home to Dashboard
2 Dashboard to Home
3. Now submit the form.
It will refresh the page.

This was working with our old version v3.0.0-beta.14

Home.Component.html

Enter Stock code: Save

Home.Component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

message: string;
stockForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder
) { }

ngOnInit() {
this.stockForm = this.formBuilder.group({
stockcode: ['', Validators.required]
});
}

onSubmit() {
this.submitted = true;
console.log(JSON.stringify(this.stockForm.value));
}
}

is it due to the lazy loading changes in v3.0.0-beta.18 release? I have noticed that if you wait for 5-10 then it will work fine.

Use project name as default

The builder should default to the angular cli project name for the libraryName.

HttpErrorResponse return status code 0 and description "Unknown Error"

I have implemented HttpInterceptor to log service exception and noticed that it's always give the status code 0 and statusText description"Unknown Error" as we are getting XHR value null and it will return the default value set while calling the base function ( _super.call(this, init, 0, 'Unknown Error') ).

var HttpErrorResponse = /** @Class / (function (super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0_["__extends"])(HttpErrorResponse, _super);
function HttpErrorResponse(init) {
debugger;
var _this =
// Initialize with a default status of 0 / Unknown Error.
_super.call(this, init, 0, 'Unknown Error') || this;
_this.name = 'HttpErrorResponse';
/*

Nested routes don't work with BrowserAnimationsModule

This issue was first reported as a comment to a separate issue. single-spa/single-spa#289 (comment)

It is from @jaspreet1234567

Hi @joeldenning , I checked the above code looks that it resolve routing issue if we redirect one app to another app. But my issue is related to internal routing in one app.

Suppose we have two routes in "app2", and we are using "BrowserAnimationsModule" in "app2", then internal routing is not working properly because here application is not unmounted only routing is happening is one application.

I think if we are able to resolve this issue then our second issue (datepicker position) should also be resolved.

Here is the link of sample project ( https://github.com/jaspreet1234567/single-spa-internal-routing-issue ) I am using for internal routing test. I just did some modifications in your "coexisting-angular-microfrontends" application.

To reproduce the issue, just go to app 2 and trying back/forward within sub routes using browser buttons.

It is working fine in angular application if we don't use single-spa library.

IE11 router not working

Hi, this is a follow-up of #56.

With coexisting-angular-microfrontends as base, I made the following changes to index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Angular app</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="/" />
</head>
<body>
  <script src="https://unpkg.com/[email protected]/minified.js"></script>
  <script src="https://unpkg.com/zone.js"></script>
  <script src="https://unpkg.com/[email protected]/lib/umd/single-spa.min.js"></script>
  <script src="/navbar/dist/navbar/main.js"></script>
  <script src="/app1/dist/app1/main.js"></script>
  <script src="/app2/dist/app2/main.js"></script>
  <script>
    singleSpa.registerApplication('navbar', window.navbar.default, function() { return true; });
    singleSpa.registerApplication('app1', window.app1.default, function(location) { return location.pathname.startsWith('/app1'); });
    singleSpa.registerApplication('app2', window.app2.default, function(location) { return location.pathname.startsWith('/app2'); });
    singleSpa.start();
  </script>
</body>
</html>

At root, it doesn't render the NavbarComponent, it just has a router-outlet:

And from the console I find the error:
Unhandled Navigation Error:
With no stacktrace or message.

So I added the enableTracing option to the navbar app's Router:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';

const routes: Routes = [
  {path: '**', component: NavbarComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And diffing from Chrome:

It seems to crash at ResolveEnd? And the RoutesRecognized event doesn't return a component.

allow configuration of externals

Allow the builder to be configured to support marking certain libraries as external. These are then mapped to Webpack's externals configuration.

This would be useful for commonly used libraries like zonejs and hammerjs

Global styles are not bundled with main.js when doing prod builds

This works as expected when running ng build but when doing ng build --prod a separate file is created.

Links between single-spa applications aren't working.

See related #41

Conversation 1

Conversation 2

Unable to load component style url for loading the scss

I have loaded successfully the single spa angular , but when I specify the style url I am getting the below error at runtime. Do I need to specify anything webpack? How can I resolve this issue?

Component

import {Component} from '@angular/core';
@Component({
  selector: 'app2',
  styleUrls:["./app2.component.scss"],
  template: `
    <div class="app2class" style="margin-top: 100px;">
      Angular 6 loaded here
    </div>
  `,
})

Error


Uncaught Error: Application 'cliapp' died in status NOT_MOUNTED: "Failed to load app2.component.scss"
    at i (single-spa.js:1)
    at t.handleAppError (single-spa.js:1)
    at single-spa.js:1
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)

My Webpack Configuration

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var HashOutput = require('webpack-plugin-hash-output');


// 'vendor':["angular","angular-ui-router","react","react-dom","react-router-dom","react-transition-group","single-spa","single-spa-angularjs","single-spa-react"],
module.exports = {
    mode: 'development',
    entry: {

        // Set the single-spa config as the project entry point
        'main.microfrontendhost.bundle': 'single-spa.config.js',
    },

    output: {
        publicPath: '/dist/',
        filename: '[id].js',
        chunkFilename: "microfrontendmodule.bundle.[chunkhash].js",
        path: path.resolve(__dirname, 'dist'),
    },

    module: {
        rules: [{
                // Webpack style loader added so we can use materialize
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
            },
            {
                test: /\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                loader: 'babel-loader',
            },
            {
                // This plugin will allow us to use html templates when we get to the angularJS app
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader',
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
            }
        ],
    },
    node: {
        fs: 'empty'
    },
    resolve: {
        modules: [
            __dirname,
            'node_modules',
        ],
        extensions: [".ts", ".tsx", ".js"]
    },
    plugins: [
        // A webpack plugin to remove/clean the build folder(s) before building
        new CleanWebpackPlugin(['dist']),
        new HashOutput({
            validateOutput: false,
        })
    ],
    devtool: 'source-map',
    externals: [],
    devServer: {
        historyApiFallback: true
    }
};

bundle size with `npm run build:single-spa` and `ng build` is gigantic

Currently if you follow the instructions in the readme for Angular CLI on a hello world app, you'll end up with a 3.5 megabyte bundle, which is gigantic. Maybe related is #30. Or perhaps because we're using platformBrowserDynamic. See related #12.

Navigation triggered outside Angular zone

Using Angular 7 Apps, when any is clicked, the following message (console.warn) shows:
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()

PlatformLocation injection fails in Angular4 child application

I have been trying to set up a single-spa main application and two angular4 children, one with routing and one without. The bootstrap for the child application is here: https://github.com/yavuztor/single-spa-trial/blob/master/childapp2/app/bootstrap.ts.

When I open the main application, the child application without router (childapp) works fine, but the one with the router fails with error:

Uncaught Error: 'childapp2' died in status NOT_MOUNTED: StaticInjectorError[PlatformLocation]: 
  StaticInjectorError[PlatformLocation]: 
    NullInjectorError: No provider for PlatformLocation!
    at _NullInjector.get (core.umd.js:349)
    at resolveToken (core.umd.js:533)
    at tryResolveToken (core.umd.js:495)
    at StaticInjector.get (core.umd.js:402)
    at resolveToken (core.umd.js:533)
    at tryResolveToken (core.umd.js:495)
    at StaticInjector.get (core.umd.js:402)
    at resolveNgModuleDep (core.umd.js:4466)
    at _callFactory (core.umd.js:4515)
    at _createProviderInstance$1 (core.umd.js:4475)
_NullInjector.get @ core.umd.js:349
resolveToken @ core.umd.js:533
tryResolveToken @ core.umd.js:495
StaticInjector.get @ core.umd.js:402
resolveToken @ core.umd.js:533
tryResolveToken @ core.umd.js:495
StaticInjector.get @ core.umd.js:402
resolveNgModuleDep @ core.umd.js:4466
_callFactory @ core.umd.js:4515
_createProviderInstance$1 @ core.umd.js:4475
initNgModule @ core.umd.js:4435
NgModuleRef_ @ core.umd.js:5110
createNgModuleRef @ core.umd.js:5100
debugCreateNgModuleRef @ core.umd.js:6745
NgModuleFactory_.create @ core.umd.js:7386
(anonymous) @ core.umd.js:2087
ZoneDelegate.invoke @ zone.js:347
onInvoke @ core.umd.js:1817
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
NgZone.run @ core.umd.js:1762
PlatformRef.bootstrapModuleFactory @ core.umd.js:2082
(anonymous) @ core.umd.js:2119
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
promiseReactionJob @ es6-shim.js:1955
(anonymous) @ es6-shim.js:1945
Item.run @ browser.js:153
drainQueue @ browser.js:123
setTimeout (async)
scheduleTask @ zone.js:1783
ZoneDelegate.scheduleTask @ zone.js:363
Zone.scheduleTask @ zone.js:216
Zone.scheduleMacroTask @ zone.js:234
(anonymous) @ zone.js:1799
proto.(anonymous function) @ zone.js:1218
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
t.(anonymous function) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
s @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.runGuarded @ zone.js:149
(anonymous) @ zone.js:110
characterData (async)
n @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
M @ single-spa.js:5103
D @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
promiseReactionJob @ es6-shim.js:1955
(anonymous) @ es6-shim.js:1945
Item.run @ browser.js:153
drainQueue @ browser.js:123
setTimeout (async)
runTimeout @ browser.js:50
process.nextTick @ browser.js:143
enqueuePromiseReactionJob @ es6-shim.js:1944
then @ es6-shim.js:2284
scheduleMicroTask @ zone.js:512
ZoneDelegate.scheduleTask @ zone.js:365
Zone.scheduleTask @ zone.js:216
Zone.scheduleMicroTask @ zone.js:231
scheduleResolveOrReject @ zone.js:785
ZoneAwarePromise.then @ zone.js:904
PlatformRef.bootstrapModule @ core.umd.js:2118
mount @ single-spa-angular2.js:60
i @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
ZoneAwarePromise @ zone.js:803
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
t.(anonymous function) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
E @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
t.(anonymous function) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
s @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.runGuarded @ zone.js:149
(anonymous) @ zone.js:110
characterData (async)
n @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
M @ single-spa.js:5103
C @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
promiseReactionJob @ es6-shim.js:1955
(anonymous) @ es6-shim.js:1945
Item.run @ browser.js:153
drainQueue @ browser.js:123
setTimeout (async)
runTimeout @ browser.js:50
process.nextTick @ browser.js:143
enqueuePromiseReactionJob @ es6-shim.js:1944
then @ es6-shim.js:2284
scheduleMicroTask @ zone.js:512
ZoneDelegate.scheduleTask @ zone.js:365
Zone.scheduleTask @ zone.js:216
Zone.scheduleMicroTask @ zone.js:231
scheduleResolveOrReject @ zone.js:785
ZoneAwarePromise.then @ zone.js:904
i @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
ZoneAwarePromise @ zone.js:803
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
t.(anonymous function) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
E @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
s @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.runGuarded @ zone.js:149
(anonymous) @ zone.js:110
characterData (async)
n @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
M @ single-spa.js:5103
C @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
ZoneTask.invokeTask @ zone.js:444
invokeTask @ zone.js:1367
globalZoneAwareCallback @ zone.js:1383
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2344
ZoneDelegate.scheduleTask @ zone.js:363
Zone.scheduleTask @ zone.js:216
Zone.scheduleMacroTask @ zone.js:234
(anonymous) @ zone.js:2376
proto.(anonymous function) @ zone.js:1218
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
ZoneAwarePromise @ zone.js:803
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
promiseReactionJob @ es6-shim.js:1955
(anonymous) @ es6-shim.js:1945
Item.run @ browser.js:153
drainQueue @ browser.js:123
setTimeout (async)
runTimeout @ browser.js:50
process.nextTick @ browser.js:143
enqueuePromiseReactionJob @ es6-shim.js:1944
then @ es6-shim.js:2284
scheduleMicroTask @ zone.js:512
ZoneDelegate.scheduleTask @ zone.js:365
Zone.scheduleTask @ zone.js:216
Zone.scheduleMicroTask @ zone.js:231
scheduleResolveOrReject @ zone.js:785
resolvePromise @ zone.js:742
(anonymous) @ zone.js:684
(anonymous) @ zone.js:875
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
s @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.runGuarded @ zone.js:149
(anonymous) @ zone.js:110
characterData (async)
n @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
M @ single-spa.js:5103
C @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
ZoneTask.invokeTask @ zone.js:444
invokeTask @ zone.js:1367
globalZoneAwareCallback @ zone.js:1383
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2344
ZoneDelegate.scheduleTask @ zone.js:363
Zone.scheduleTask @ zone.js:216
Zone.scheduleMacroTask @ zone.js:234
(anonymous) @ zone.js:2376
proto.(anonymous function) @ zone.js:1218
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
ZoneAwarePromise @ zone.js:803
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
ZoneDelegate.invoke @ zone.js:347
Zone.run @ zone.js:128
(anonymous) @ zone.js:787
ZoneDelegate.invokeTask @ zone.js:373
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:528
promiseReactionJob @ es6-shim.js:1955
(anonymous) @ es6-shim.js:1945
Item.run @ browser.js:153
drainQueue @ browser.js:123
setTimeout (async)
runTimeout @ browser.js:50
process.nextTick @ browser.js:143
enqueuePromiseReactionJob @ es6-shim.js:1944
then @ es6-shim.js:2284
scheduleMicroTask @ zone.js:512
ZoneDelegate.scheduleTask @ zone.js:365
Zone.scheduleTask @ zone.js:216
Zone.scheduleMicroTask @ zone.js:231
scheduleResolveOrReject @ zone.js:785
ZoneAwarePromise.then @ zone.js:904
(anonymous) @ system.src.js:4795
import @ system.src.js:830
(anonymous) @ system.src.js:1800
loadChildapp @ root-application.js:14
(anonymous) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
t.(anonymous function) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
E @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
t.(anonymous function) @ single-spa.js:5103
r @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
E @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
(anonymous) @ single-spa.js:5103
o @ single-spa.js:5103
u @ single-spa.js:5103
execute @ root-application.js:9
ensureEvaluated @ system.src.js:3358
execute @ system.src.js:3508
doDynamicExecute @ system.src.js:757
link @ system.src.js:955
doLink @ system.src.js:621
updateLinkSetOnLoad @ system.src.js:664
(anonymous) @ system.src.js:486
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Pending.become @ system-polyfills.src.js:838
Pending.resolve @ system-polyfills.src.js:791
promiseResolve @ system-polyfills.src.js:395
load @ system.src.js:996
xhr.onreadystatechange @ system.src.js:1017
XMLHttpRequest.send (async)
fetchTextFromURL @ system.src.js:1041
(anonymous) @ system.src.js:1777
init @ system-polyfills.src.js:382
Promise @ system-polyfills.src.js:370
(anonymous) @ system.src.js:1776
(anonymous) @ system.src.js:2801
(anonymous) @ system.src.js:3379
(anonymous) @ system.src.js:3711
(anonymous) @ system.src.js:4103
(anonymous) @ system.src.js:4568
(anonymous) @ system.src.js:4837
(anonymous) @ system.src.js:408
tryCatchReject @ system-polyfills.src.js:1188
runContinuation1 @ system-polyfills.src.js:1147
Fulfilled.when @ system-polyfills.src.js:935
Pending.run @ system-polyfills.src.js:826
Scheduler._drain @ system-polyfills.src.js:102
Scheduler.drain @ system-polyfills.src.js:67
run @ system-polyfills.src.js:273
characterData (async)
(anonymous) @ system-polyfills.src.js:279
Scheduler.run @ system-polyfills.src.js:92
Scheduler.enqueue @ system-polyfills.src.js:77
Async.when @ system-polyfills.src.js:892
Handler.chain @ system-polyfills.src.js:742
Promise.then @ system-polyfills.src.js:487
(anonymous) @ system.src.js:4795
import @ system.src.js:830
(anonymous) @ system.src.js:1800
(anonymous) @ (index):8

The PlatformLocation is in BrowserModule, and it is included in the imports. I don't quite understand what I am missing.

enableProdMode should be called with ng build.

Currently environment.production is false even during ng build. See https://github.com/CanopyTax/single-spa-angular/blob/master/src/schematics/ng-add/_files/src/main.single-spa.ts.template#L11. This might be related to the large bundle sizes we're seeing with npm run build:single-spa

Cannot load an angular cli project with single-spa

Hey,
I've created a new project that gets a bundle.js file dynamically and loads it using single-spa and single-spa-angular2.
I could load a regular angular project and a vanilla JS project, but when I'm creating an angular cli project (using "ng new" angular cli command), building it and trying to load its bundle, I'm encountering errors when loading the bundle.js file (I'm using SystemJS.import for that).
I tried as well to configure the project's webpack config file (using ng eject) but nothing helped.
Do you have any step-by-step guide of how to use single-spa for angular cli project?
Hope my question is cleared and in the right place, it's the first time I'm asking here.

Thanks.

[Brainstorm] Multiple versions of Zone JS and Angular for different child applications

@daniele-zurico is the one who has been researching this the most. The basic problem is that if you want to have multiple versions of ZoneJS (one for each child application that uses Angular), we don't know of a way to do that. This is because ZoneJS creates a global variable window.Zone that would clash if you loaded the Zone library.

Note that the recommended approach is to have a shared version of Zone and Angular that different single-spa child applications share. But that this issue is talking for when that is not desired.

My newest idea for how to potentially solve this is a SystemJS-specific solution that I'm not totally sure about. It involves:

Tell SystemJS not to let the Angular child application leak the Zone global variable
Tell SystemJS to provide the Angular child application a shimmed Zone global variable whenever it is referenced.

I believe that doing this is possible and would require a combination of the SystemJS configuration options for shimming dependencies, custom globals, and exports

CORS policy: No 'Access-Control-Allow-Origin'

Hi @joeldenning,

Access to script at 'http://localhost:8086/main.js' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If we create two separate website in window IIS and try to load it with single spa.

"imports": {
"app1": "http://localhost:8651/main.js",
"app2": "http://localhost:8600/main.js",
"single-spa": "https://unpkg.com/[email protected]/lib/system/single-spa.min.js"
}

schematic: ng-add

ng-add This command is invoked when single-spa-angular package is installed to a Anguar CLI project. e.g. ng add single-spa-angularWe could mimic other libraries like@angular/material` and update the default project with single-spa configuration. see more

Schematic Steps:

Add/install single-spa-angular and single-spa dependency
Generate a main.single-spa.ts in /src/
Create an npm script to build the app as a single-spa module
Update angular.json with new architect for building app as single-spa-module

Document separate architect

The current docs show how to use the builder with the ng build command. Some devs may want to keep this unchanged. Show how to make a new architect task and invoke from CLI.

When using a single navbar for all applications, repeated navigations within a single app fail

This occurs when you have a single navbar app that controls navigation between multiple applications, including their subroutes.

The first navigation to any app or app subroute completes successfully. Any subsequent navigation inside that same app will fail. For example:

/app1 -> /app2 -> /app1 will succeed.

/app1 -> /app1/subroute will fail to load the subroute.

/app1 -> /app2 -> /app1/subroute will succeed.

In other words, navigation switching between apps works fine, but subsequent navigations within a single app (from routes on the navbar) will fail until you first navigate outside of the app.

polyfills and styles bundles are not created any more

With this commit, feat(builder): Angular CLI builder for bundling single module, polyfills and styles entries are removed and these bundles are not built anymore, which are essential to our application.

Does single-spa-angular support retrieving apps from a different domain?

I cloned the coexisting-angular-microfrontends. It works perfectly.
But now I have question about how to register an application from different domain.
Something like
singleSpa.registerApplication('app2', () => download('http://abc/main.abcd.js', 'MyAngulurApp'), location => location.pathname.startsWith('/app2'));

Global styles aren't being loaded

Documentation and/or schematics for changing `app-root` to something unique

When you have 2+ angular apps on the page, you can't have both of the root components have the app-root selector -- otherwise angular doesn't know which one is which.

So you need to change the name of your root component in each app in two places:
(1) The singleSpaAngular template opt. https://github.com/joeldenning/coexisting-angular-microfrontends/blob/49d544860518b6f476e5aeb029071901bd180dab/app1/src/main.single-spa.ts#L16
(2) The component selector inside of app.component.ts. https://github.com/joeldenning/coexisting-angular-microfrontends/blob/49d544860518b6f476e5aeb029071901bd180dab/app1/src/app/app.component.ts#L4

We should at least add documentation for this, or maybe explore schematics for it.

An error occurs when the route is lazy loaded

This error occurs when the route uses lazy loading.

Angular 6 support

[email protected] through beta.10 all have had angular 7 in mind. Ideally we would support at least Angular 6, as well (and maybe older versions, too).

Angular 7 load multiple app

awesome will get support to angular 7.

I was going through the instruction and start loading my applications. I am able to build and load the application through index.html but it load only single application base on base href.

https://github.com/CanopyTax/single-spa-angular/blob/master/README.md

I am new to single-spa so not sure what are the options to register multiple application:
singleSpa.registerApplication('spa1', window.spa1.default, location => true);
singleSpa.registerApplication('spa2', window.spa2.default, , location => location.pathname.indexOf("/spa2") >= 0);

Angular app bootstrapped with platformBrowserDynamic bundles compiler.js

Been trying to dive through this for some time now, but running into a bit of a dead end, as my deep understanding of some of this stuff is limited.

My bundle size is getting rather large, and a huge chunk of it is Angular's compiler. This seems to only be required because I'm using platformBrowserDynamic instead of platformBrowser. If I flip that over, it drops out and ends up being 460+kB smaller parsed size (115+kB gzipped), which is a significant change.

However, without that, it's not actually working as single-spa states the angularPlatform should be platformBrowserDynamic. Is this a fundamental requirement or should I be able to use the AoT version?

add conventional commits

Enforce conventional commits with commitLint
Autogen changlog with standard-version

Support `ng serve`

We should allow users to run there single-spa application via ng serve.

Proposed implementation: we have the html file be one in the root config described in https://github.com/CanopyTax/single-spa-angular#check-if-it-works. And then we configure webpack-dev-server to point to that index.html file.

Using BrowserAnimationsModule causes applications to not unmount

See related single-spa/single-spa#289

I have confirmed locally that the bug occurs.

Angular workspace with projects

Hi, I was looking into creating a monorepo type project with multiple angular applications, and I decided to go for a project structure workspace, supported by default using the angular cli.

# Create workspace without default application
ng new project-name --createApplication=false
cd project-name
# Generate application, will by default output to /projects/{appName}
ng generate application app1
ng generate application app2
# Add single-spa-angular to configuration for both projects
ng add single-spa-angular@beta --project app1
ng add single-spa-angular@beta --project app2
# Make sure they are both valid single-spa apps
ng build app1 && ng build app2

This will crash, because the builder is unable to locate src/main.single-spa.ts, and in this case the main should be projects/{appName}/src/main.single-spa.ts.

https://github.com/CanopyTax/single-spa-angular/blob/4d396e2961a082b5dc703d64feeeb1ec1d51b9e0/src/schematics/ng-add/index.ts#L74

Also I found an issue with what I'm guessing is this line:

https://github.com/CanopyTax/single-spa-angular/blob/4d396e2961a082b5dc703d64feeeb1ec1d51b9e0/src/builders/single-spa-webpack-builder.ts#L7

Which causes all apps to be exported with the same module name, and replacing the global object when including them e.g.: if app1 is default project:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["app1"] = factory();
	else
		root["app1"] = factory();
})

It will actually crash if during registerApplication() as it cannot find the window["appName"].default object.

By manually editing defaultProject to empty string in angular.json:
"defaultProject": ""
You get the expected result.