How to configure Yii2 With Your Angular 11 or angular 10 Code?

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.

  1. First Create a New Module or You can use the existing Module But I prefer to create a new Module for that.
  2. 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.
  3. 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
  1. Now You need to do one more thing in your index file of angular code
  <meta charset="utf-8">
  <title>My angular Application </title>
  <base href="/angularproject">

and you also change some more line
CSS File

<link rel="stylesheet" href="projects/styles.c918da419af6f812fa3e.css" media="print" onload="'all'"><noscript>
    <link rel="stylesheet" href="projects/styles.c918da419af6f812fa3e.css">

Script File

  <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!!!

1 Like

this becomes a monolithic system right?

Yes Offcourse With this way you can use your yii2 app for both purpose

This post was flagged by the community and is temporarily hidden.