📝 add some angular's doc (umijs#1346)

docs/faq/README.md

@@ -16,17 +16,20 @@ To solve the exception, try the following steps:
 
 2. check you have set the specified configuration with your bundler, see the [doc](/guide/getting-started#2-config-sub-app-bundler)
 
-3. check your `package.json` name field is unique between sub apps.
+3. Check the webpack of micro app whether it configured with `output.globalObject` or not, be sure its value was `window` if it had, or remove it to use default value.
 
-4. Check if the entry js in the sub-app's entry HTML is the last script to load. If not, move the order to make it be the last, or manually mark the entry js as `entry` in the HTML, such as:
+4. Check your `package.json` name field is unique between sub apps.
+
+5. Check if the entry js in the sub-app's entry HTML is the last script to load. If not, move the order to make it be the last, or manually mark the entry js as `entry` in the HTML, such as:
    ```html {2}
    <script src="/antd.js"></script>
    <script src="/appEntry.js" entry></script>
    <script src="https://www.google.com/analytics.js"></script>
    ```
 
-5. If the development environment is OK but the production environment is not, check whether the `index.html` and `entry js` of the micro app are returned normally, for example, `404.html` is returned.
+6. If the development environment is OK but the production environment is not, check whether the `index.html` and `entry js` of the micro app are returned normally, for example, `404.html` is returned.
 
+7. If you're using webpack5, please see [here](https://github.com/umijs/qiankun/issues/1092)
 If it still not works after the steps above, this is usually due to browser compatibility issues. Try to **set the webpack `output.library` of the broken sub app the same with your main app registration for your app**, such as:
 
 Such as here is the main configuration:
@@ -104,6 +107,10 @@ This error thrown as the container DOM does not exist after the micro app is loa
 
      In other cases, please do not use `document.write`.
 
+## `Application died in status NOT_MOUNTED: Target container with #container not existed while xxx mounting!`
+
+This error usually occurs when the main app is Vue, and the container is written on a routing page and uses the routing transition effect. Some special transition effect caused the container not to exist in the mounting process of the micro app. The solution is to use other transition effects, or remove the routing transition.
+
 ## `Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!`
 
 Similar to the above error, This error thrown as the container DOM does not exist when the micro app is loaded. Generally, it is caused by incorrect calling timing of the `start` function, just adjust the calling timing of the `start` function.
@@ -154,6 +161,45 @@ It must be ensured that the routing page of the main app is also loaded when the
 
 `react` + `react-router` main app：only need to make the activeRule of the sub app include the route of the main app.
 
+`angular` + `angular-router` main app，similar to the Vue app：
+
+1. The main app registers a wildcard sub route for this route, and the content is empty.
+
+    ```ts
+    const routes: Routes = [
+      { 
+        path: 'portal', 
+        component: PortalComponent,
+        children: [
+          { path: '**', component: EmptyComponent },
+        ],
+      },
+    ];
+    ```
+2. The `activeRule` of the micro app needs to include the route `path` of the main app.
+    ```js
+    registerMicroApps([
+      { 
+        name: 'app1', 
+        entry: 'http://localhost:8080', 
+        container: '#container', 
+        activeRule: '/portal/app1', 
+      },
+    ]);
+    ```
+3. Call the `start` function in the `ngAfterViewInit` cycle of this routing component, **be careful not to call it repeatedly**.
+    ```ts
+    import { start } from 'qiankun';
+    export class PortalComponent implements AfterViewInit {
+      ngAfterViewInit(): void {
+        if (!window.qiankunStarted) {
+          window.qiankunStarted = true;
+          start();
+        }
+      }
+    }
+    ```
+
 ## Vue Router Error - `Uncaught TypeError: Cannot redefine property: $router`
 
 If you pass `{ sandbox: true }` to `start()` function, `qiankun` will use `Proxy` to isolate global `window` object for sub applications. When you access `window.Vue` in sub application's code，it will check whether the `Vue` property in the proxyed `window` object. If the property does not exist, it will look it up in the global `window` object and return it.

docs/faq/README.zh.md

@@ -16,17 +16,21 @@ qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出
 
 2. 检查微应用的 webpack 是否增加了指定的配置，参考[文档](/zh/guide/getting-started#2-配置微应用的打包工具)。
 
-3. 检查微应用的 `package.json` 中的 `name` 字段是否是微应用中唯一的。
+3. 检查微应用的 webpack 是否配置了 `output.globalObject` 的值，如果有请确保其值为 `window`，或者移除该配置从而使用默认值。
 
-4. 检查微应用的 entry html 中入口的 js 是不是最后一个加载的脚本。如果不是，需要移动顺序将其变成最后一个加载的 js，或者在 html 中将入口 js 手动标记为 `entry`，如：
+4. 检查微应用的 `package.json` 中的 `name` 字段是否是微应用中唯一的。
+
+5. 检查微应用的 entry html 中入口的 js 是不是最后一个加载的脚本。如果不是，需要移动顺序将其变成最后一个加载的 js，或者在 html 中将入口 js 手动标记为 `entry`，如：
 
    ```html {2}
    <script src="/antd.js"></script>
    <script src="/appEntry.js" entry></script>
    <script src="https://www.google.com/analytics.js"></script>
    ```
 
-5. 如果开发环境可以，生产环境不行，检查微应用的 `index.html` 和 `entry js` 是否正常返回，比如说返回了 `404.html`。
+6. 如果开发环境可以，生产环境不行，检查微应用的 `index.html` 和 `entry js` 是否正常返回，比如说返回了 `404.html`。
+
+7. 如果你正在使用 webpack5，请看[这个issues](https://github.com/umijs/qiankun/issues/1092)
 
 如果在上述步骤完成后仍有问题，通常说明是浏览器兼容性问题导致的。可以尝试 **将有问题的微应用的 webpack `output.library` 配置成跟主应用中注册的 `name` 字段一致**，如：
 
@@ -105,6 +109,10 @@ qiankun 抛出这个错误是因为微应用加载后容器 DOM 节点不存在
 
     如果是其他的情况，请不要使用 `document.write` 。
 
+## `Application died in status NOT_MOUNTED: Target container with #container not existed while xxx mounting!`
+
+这个报错通常出现在主应用为 vue 时，容器写在了路由页面并且使用了路由过渡效果，一些特殊的过渡效果会导致微应用在 mounting 的过程中容器不存在，解决办法就是换成其他的过渡效果，或者去掉路由过渡。
+
 ## `Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!`
 
 与上面的报错类似，这个报错是因为微应用加载时容器 DOM 不存在。一般是因为 `start` 函数调用时机不正确导致的，调整 `start` 函数调用时机即可。
@@ -155,6 +163,44 @@ qiankun 抛出这个错误是因为微应用加载后容器 DOM 节点不存在
 
 `react` + `react-router` 技术栈的主应用：只需要让微应用的 `activeRule` 包含主应用的这个路由即可。
 
+`angular` + `angular-router` 技术栈的主应用，与 vue 项目类似：
+
+1. 主应用给这个路由注册一个通配符的子路由，内容为空。
+
+    ```ts
+    const routes: Routes = [
+      { 
+        path: 'portal', 
+        component: PortalComponent,
+        children: [
+          { path: '**', component: EmptyComponent },
+        ],
+      },
+    ];
+    ```
+2. 微应用的 `activeRule` 需要包含主应用的这个路由 `path`。
+    ```js
+    registerMicroApps([
+      { 
+        name: 'app1', 
+        entry: 'http://localhost:8080', 
+        container: '#container', 
+        activeRule: '/portal/app1', 
+      },
+    ]);
+    ```
+3. 在这个路由组件的 `ngAfterViewInit` 周期调用 `start` 函数，**注意不要重复调用**。
+    ```ts
+    import { start } from 'qiankun';
+    export class PortalComponent implements AfterViewInit {
+      ngAfterViewInit(): void {
+        if (!window.qiankunStarted) {
+          window.qiankunStarted = true;
+          start();
+        }
+      }
+    }
+    ```
 ## Vue Router 报错 `Uncaught TypeError: Cannot redefine property: $router`
 
 qiankun 中的代码使用 Proxy 去代理父页面的 window，来实现的沙箱，在微应用中访问 `window.Vue` 时，会先在自己的 window 里查找有没有 `Vue` 属性，如果没有就去父应用里查找。
@@ -771,4 +817,3 @@ export async function mount(props) {
   
 
 
-

docs/guide/tutorial.md

@@ -390,6 +390,34 @@ Take the `angular 9` project generated by `Angular-cli 9` as an example, other v
 
 Of course, you can also choose to use the `single-spa-angular` plugin, refer to[ single-spa-angular official website](https://single-spa.js.org/docs/ecosystem-angular) 和 [angular demo](https://github.com/umijs/qiankun/tree/master/examples/angular9)
 
+（**supplement**）The angular7 has the same steps as angular9 except for step 4. The steps for angular7 to modify the `webpack` configuration are as follows:
+
+In addition to installing the 7.x version of `angular-builders/custom-webpack`, you also need to install `angular-builders/dev-server`.
+
+```bash
+npm i @angular-builders/custom-webpack@7 -D
+npm i @angular-builders/dev-server -D
+```
+
+Add `custom-webpack.config.js` to the root directory, same as above.
+
+Modify `angular.json`, `[packageName] > architect > build > builder` is the same as Angular9, and `[packageName] > architect > serve > builder` is different from Angular9.
+
+```diff
+- "builder": "@angular-devkit/build-angular:browser",
++ "builder": "@angular-builders/custom-webpack:browser",
+  "options": {
++    "customWebpackConfig": {
++      "path": "./custom-webpack.config.js"
++    }
+  }
+
+```
+
+```diff
+- "builder": "@angular-devkit/build-angular:dev-server",
++ "builder": "@angular-builders/dev-server:generic",
+```
 ### Micro app built without webpack
 
 Some apps that are not built by `webpack`, such as `jQuery` app, `jsp` app, can be handled according to this.

docs/guide/tutorial.zh.md

@@ -55,7 +55,7 @@ start();
     注意：运行时的 publicPath 和构建时的 publicPath 是不同的，两者不能等价替代。
     </Alert>
 
-2. 子应用建议使用 `history` 模式的路由，需要设置路由 `base`，值和它的 `activeRule` 是一样的。
+2. 微应用建议使用 `history` 模式的路由，需要设置路由 `base`，值和它的 `activeRule` 是一样的。
 3. 在入口文件最顶部引入 `public-path.js`，修改并导出三个生命周期函数。
 4. 修改 `webpack` 打包，允许开发环境跨域和 `umd` 打包。
 
@@ -390,6 +390,35 @@ start();
 
 当然，也可以选择使用 `single-spa-angular` 插件，参考[ single-spa-angular 的官网](https://single-spa.js.org/docs/ecosystem-angular) 和 [angular demo](https://github.com/umijs/qiankun/tree/master/examples/angular9)
 
+（**补充**）angular7 项目除了第4步以外，其他的步骤和 angular9 一模一样。angular7 修改 `webpack` 打包配置的步骤如下：
+
+除了安装 `angular-builders/custom-webpack` 插件的 7.x 版本外，还需要安装 `angular-builders/dev-server`。
+
+```bash
+npm i @angular-builders/custom-webpack@7 -D
+npm i @angular-builders/dev-server -D
+```
+
+在根目录增加 `custom-webpack.config.js` ，内容同上。
+
+修改 `angular.json`， `[packageName] > architect > build > builder` 的修改和 angular9 一样， `[packageName] > architect > serve > builder` 的修改和 angular9 不同。
+
+```diff
+- "builder": "@angular-devkit/build-angular:browser",
++ "builder": "@angular-builders/custom-webpack:browser",
+  "options": {
++    "customWebpackConfig": {
++      "path": "./custom-webpack.config.js"
++    }
+  }
+
+```
+
+```diff
+- "builder": "@angular-devkit/build-angular:dev-server",
++ "builder": "@angular-builders/dev-server:generic",
+```
+
 ### 非 webpack 构建的微应用
 
 一些非 `webpack` 构建的项目，例如 `jQuery` 项目、`jsp` 项目，都可以按照这个处理。