After Building Your Angular Code for Production You Need to Host that code somewhere. and If You want to host that code in the same Yii2 Application where you write your API.
So There are Just a Few Steps to that things.
- First Create a New Module or You can use the existing Module But I prefer to create a new Module for that.
- Copy your Angular Code under the web directory where all your public files exist. Create a new directory eg: projects and copy your code into that directory.
- When you register your module into the config file you need to write one more extra line.
'modules' => [
'angularproject' => [
'class' => 'backend\angularproject\Module',
'layout' => '@backend/web/projects/index.html', // set index page of your angular application
],
],
- Now You need to do one more thing in your index file of angular code
<head>
<meta charset="utf-8">
<title>My angular Application </title>
<base href="/angularproject">
</head>
and you also change some more line
CSS File
<link rel="stylesheet" href="projects/styles.c918da419af6f812fa3e.css" media="print" onload="this.media='all'"><noscript>
<link rel="stylesheet" href="projects/styles.c918da419af6f812fa3e.css">
Script File
<app-root></app-root>
<script src="projects/runtime-es2017.e0b479dd0cf7883deeb5.js" type="module"></script>
<script src="projects/runtime-es5.e0b479dd0cf7883deeb5.js" nomodule defer></script>
<script src="projects/polyfills-es5.38e29e86cd58dd90ab3b.js" nomodule defer></script>
<script src="projects/polyfills-es2017.e91f9ff83cdff7174329.js" type="module"></script>
<script src="projects/main-es2017.030fd7f9668d1802cda4.js" type="module"></script>
<script src="projects/main-es5.030fd7f9668d1802cda4.js" nomodule defer></script>
Just Set a Path like this of all script tags inside your angular index file
And Now Just Go and Check your Angular Project /angularproject
It’s Working Now !! Hurray!!!